<page-header autoTitle="false" />
<form nz-fom nzLayout="inline" se-container gutter="24">
  <se label="记录内容">
    <input
      nz-input
      style="width: 180px"
      name="recordContent"
      placeholder="编码，名称模糊查询"
      [(ngModel)]="queryParams.recordContent"
      [ngModelOptions]="{ standalone: true }"
    />
  </se>
  <se label="开始日期">
    <nz-date-picker
      name="beginDate"
      placeholder="请选择开始日期"
      nzFormat="yyyy-MM-dd"
      [(ngModel)]="queryParams.beginDate"
      [ngModelOptions]="{ standalone: true }"
    />
  </se>
  <se label="结束日期">
    <nz-date-picker
      name="endDate"
      placeholder="请选择结束日期"
      nzFormat="yyyy-MM-dd"
      [(ngModel)]="queryParams.endDate"
      [ngModelOptions]="{ standalone: true }"
    />
  </se>
  <se>
    <button nz-button nzType="primary" (click)="query()">查询</button>
    <button nz-button nzType="default" (click)="addRecord()">
      <i nz-icon nzType="plus"></i>
      新建记录
    </button>
  </se>
</form>

<div class="card-container">
  <nz-tabset nzType="card" [nzSelectedIndex]="'0'" [nzTabBarExtraContent]="extraTemplate">
    <nz-tab [nzTitle]="'时间线'">
      <!-- <nz-card> -->
      <nz-radio-group [(ngModel)]="mode" [ngStyle]="{ 'margin-bottom': '20px' }">
        <label nz-radio nzValue="left">左对齐</label>
        <label nz-radio nzValue="right">右对齐</label>
        <label nz-radio nzValue="alternate">交替对齐</label>
        <label nz-radio nzValue="custom">自定义</label>
      </nz-radio-group>
      <nz-timeline [nzMode]="mode">
        <!-- <nz-timeline-item nzLabel="2015-09-01">Create a services</nz-timeline-item> -->
        <nz-timeline-item *ngFor="let o of row" [nzLabel]="o.formatDate" [nzColor]="o.status">{{ o.recordContent }}</nz-timeline-item>
      </nz-timeline>
      <!-- </nz-card> -->
    </nz-tab>
    <nz-tab [nzTitle]="'记录管理'">
      <nz-card>
        <st #st [data]="url" [req]="req" [columns]="columns" size="small" [expand]="expandTpl" expandRowByClick expandAccordion>
          <ng-template #expandTpl let-item let-index="index" let-column="column">
            <sv-container size="small" col="3">
              <sv-title>更多内容</sv-title>
              <sv label="记录内容" type="success" col="1">{{ item!.recordContent }}</sv>
              <sv label="扩展内容" col="1">{{ item!.extContent }} </sv>
              <sv label="标签列表">{{ item!.tagList }}</sv>
              <sv label="更新人">{{ item!.lastModifiedBy }}</sv>
              <sv label="更新日期">{{ item!.lastModifiedDate }}</sv>
            </sv-container>
          </ng-template>
        </st>
      </nz-card>
    </nz-tab>
  </nz-tabset>
  <ng-template #extraTemplate>
    <button nz-button nzType="primary" (click)="query()">查询</button>
  </ng-template>
</div>

<nz-drawer
  [nzBodyStyle]="{ overflow: 'auto' }"
  [nzWidth]="520"
  [nzVisible]="drawer_visible"
  nzPlacement="right"
  [nzTitle]="drawer_Title"
  [nzExtra]="extra"
  [nzFooter]="footerTpl"
  [nzMaskClosable]="false"
  (nzOnClose)="drawer_close()"
>
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="vform" nzLayout="vertical" se-container gutter="24">
      <se label="选择记录日期" required>
        <nz-date-picker name="recordDate" placeholder="请选择结束日期" nzFormat="yyyy-MM-dd" formControlName="recordDate" />
      </se>
      <se label="记录内容" required>
        <textarea nz-input name="recordContent" formControlName="recordContent" [nzAutosize]="{ minRows: 3 }"></textarea>
      </se>
      <se label="扩展内容" required>
        <textarea nz-input name="extContent" formControlName="extContent" [nzAutosize]="{ minRows: 2 }"></textarea>
      </se>
      <se label="选择标签">
        <nz-select formControlName="tagList" style="width: 100%" nzPlaceHolder="标签" nzMode="multiple" nzAllowClear>
          <nz-option [nzValue]="'生活'" [nzLabel]="'生活'" />
          <nz-option [nzValue]="'工作'" [nzLabel]="'工作'" />
          <nz-option [nzValue]="'生病'" [nzLabel]="'生病'" />
          <nz-option [nzValue]="'健身'" [nzLabel]="'健身'" />
          <nz-option [nzValue]="'篮球'" [nzLabel]="'篮球'" />
          <nz-option [nzValue]="'魔兽'" [nzLabel]="'魔兽'" />
          <nz-option [nzValue]="'饮食'" [nzLabel]="'饮食'" />
        </nz-select>
        <!-- <input nz-input name="tagList" placeholder="请输入标签，多个用逗号间隔" formControlName="tagList" /> -->
      </se>
      <se label="状态">
        <nz-select formControlName="status" style="width: 100%" nzPlaceHolder="请选择状态" nzAllowClear>
          <nz-option [nzValue]="'green'" [nzLabel]="'已完成'" />
          <nz-option [nzValue]="'red'" [nzLabel]="'告警或错误'" />
          <nz-option [nzValue]="'blue'" [nzLabel]="'正在进行'" />
          <nz-option [nzValue]="'gray'" [nzLabel]="'未完成或失效'" />
        </nz-select>
      </se>
    </form>
  </ng-container>
</nz-drawer>
<ng-template #extra />

<ng-template #footerTpl>
  <div style="float: left">
    <button nz-button nzType="primary" (click)="saveRecord()">保存</button>
    <button nz-button style="margin-right: 8px" (click)="drawer_close()">关闭</button>
  </div>
</ng-template>
